<!--
 * @Author: your name
 * @Date: 2021-08-10 11:46:22
 * @LastEditTime: 2021-08-10 19:52:32
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \briup\3-html&css\day07\07-background.html
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            /* 当背景颜色和背景图片同时设置了，可以把背景颜色设置成跟图片类似的纯色 */
            /* background: turquoise;
             background-image: url('../网易考拉案例/images/首页图1.png'); 
            background-color:turquoise; */
          
             /* background-color: ;  */
             background-image: url(../网易云案例/12.png); 
            background-repeat: no-repeat; 
            background-attachment: fixed;
            /* background-attachment: scroll; */
            background-attachment: local;
            /*背景方位 x轴向右，y轴向下  关键词 */
            background-position: 200px 100px;
        }
        body>div{
            width:300px;
            height:300px;
            margin:20px;
            padding:20px;
            border:110px solid royalblue;
            background-image: url('../网易考拉案例/images/首页图2.png');
        }
        body>div:nth-child(1){
            /* 修饰背景图片的宽高 */
           
            background-size: 200px 100px;
            /* 默认值repeat 在x轴y轴重复 */
            background-repeat: repeat;
        }
        body>div:nth-child(2){
            /* cover属性，只会保留一张背景图片 */
            /* contain 属性 按图片的宽高比进行拉伸 */
            background-size: 80%;
           
            /* 不重复，只保留一张 */
            background-repeat: no-repeat;
        }
        body>div:nth-child(3){
            /* 只在x轴重复，只留有一行 */
            background-repeat: repeat-x;
        }
         /* background-origin:content-box        从内容起始值开始平铺图片 默认值为padding-box
              background-origin:border-box      从border起始值开始平铺图片 */
              body>div:nth-child(5){
                  /* background-origin: padding-box; */
                  /* 覆盖范围 默认值为padding-box*/
                  background-clip: content-box;   
                  
              }
              body>div>p{
                  height:500px;
              }
              body>div:nth-child(6){
                   overflow: scroll; 
                  /* background-attachment: scroll; */
                  /* background-attachment: fixed; */
              }
    </style>
</head>
<body>
    <div>第一个</div>
    <div>第一个</div>
    <div>第一个</div>
    <div>第一个</div>
    <div>第一个</div>
    <div>第6个<p>段落</p><p>结束</p></div>
</body>
</html>